{% if versions %}

<style>
input[type='checkbox'] {
  display: none;
}

.lbl-toggle {
  display: block;

  padding: 1rem;

  cursor: pointer;

  border-radius: 7px;
  transition: all 0.25s ease-out;
}

.lbl-toggle::before {
  content: ' ';
  display: inline-block;

  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;

  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);

  transition: transform .2s ease-out;
}

.collapsible-content {
  max-height: 0px;
  padding-top: 0px;
  overflow: hidden;

  transition: max-height .25s ease-in-out;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 100vh;
}

.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

.toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.content-inner {
  padding-bottom: 1rem;
}
</style>

<script>
function checkPageExistence(versionName, current_language, pagename) {
  var newUrl = `https://flower.ai/docs/framework/${versionName}/${current_language}/${pagename}.html`;
  var fallbackUrl = `https://flower.ai/docs/framework/${versionName}/${current_language}/index.html#references`;

  fetch(newUrl)
    .then(response => {
      if (response.ok) {
        window.location.href = newUrl;
      } else {
        window.location.href = fallbackUrl;
      }
    })
    .catch(error => {
      console.error('Error:', error);
      window.location.href = fallbackUrl;
    });
}
</script>

<div class="wrap-collabsible">
  <input id="collapsible" class="toggle" type="checkbox">
  <label for="collapsible" class="lbl-toggle">Versions</label>
  <div class="collapsible-content">
    <div class="content-inner">
      <ul>
        {%- for item in versions %}
        <li>
          <a href="javascript:void(0);"
             onclick="checkPageExistence('{{ item.name }}', '{{ current_language }}', '{{ pagename }}')"
             style="text-decoration:none">
             {{ item.name }}
          </a>
        </li>
        {%- endfor %}
      </ul>
    </div>
  </div>
</div>
{% endif %}
